<template>
	<view>
		<view class="container">
			<u-form ref="editFilm" labelWidth="80" :model="editForm" :rules="editRules">
				<u-form-item @click="pickerShow = true" required label="影视分类" prop="filmCategoryId" borderBottom>
					<u-input v-model="editForm.filmCategoryName" disabled disabledColor="#ffffff" placeholder="请选择影视分类"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="pickerShow" title="影视分类" ref="uPicker" :columns="filmCategoryList" keyName="name"
						@cancel="cancelHandler" @confirm="confirmHandler">
					</u-picker>
				</u-form-item>

				<u-form-item required label="影视名称" prop="name" borderBottom>
					<u-input v-model="editForm.name" placeholder="请输入影视名称" border="none"></u-input>
				</u-form-item>

				<u-form-item required label="封面图" prop="coverImg" borderBottom>

					<u-upload ref="uUpload" uploadText="最大支持2MB" :fileList="coverImgFiles" name="coverImgUpload"
						multiple :maxCount="1" :maxSize="2" :beforeRead="beforeRead" :afterRead="afterRead"
						@delete="deleteImg">
					</u-upload>


				</u-form-item>

				<u-form-item required label="简介" prop="introduce" borderBottom>
					<u-textarea maxlength="200" v-model="editForm.introduce" placeholder="请输入内容"></u-textarea>
				</u-form-item>
				<u-button class="btn" type="primary" :text="id ? '修改' : '添加'" @click="editFilmData"></u-button>
			</u-form>
		</view>

	</view>
</template>

<script>
	import http from "@/utils/http.js"
	import Config from "@/utils/config.js"
	import Constants from "@/utils/constants.js"
	export default {
		data() {
			return {
				//显示隐藏分类
				pickerShow: false,
				//影视ID
				id: "",
				//分类
				filmCategoryList: [],
				//表单数据对象
				editForm: {
					filmCategoryId: '',
					name: '',
					introduce: '',
					coverImg: '',
					filmCategoryName: ''
				},
				//表单校验对象
				editRules: {
					filmCategoryId: {
						type: 'number',
						required: true,
						message: '请选择影视分类',
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						required: true,
						message: '请填写影视名称',
						trigger: ['blur', 'change']
					},
					coverImg: {
						type: 'string',
						required: true,
						message: '请上传封面图',
						trigger: ['blur', 'change']
					},
					introduce: {
						type: 'string',
						required: true,
						message: '请添加简介',
						trigger: ['blur', 'change']
					}
				},
				//上传封面图
				coverImgFiles: []
			}
		},
		onLoad(options) {
			if (options.filmId) {
				uni.setNavigationBarTitle({
					title: '编辑影视'
				})
				this.id = options.filmId
			}
			this.getfilmCategory()

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.editFilm.setRules(this.editRules)
		},
		methods: {
			//获取分类
			getfilmCategory() {
				var params = {
					url: `/film/filmCategory/list`,
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							this.filmCategoryList = [res.data]
							if(this.id){
								this.upfilmData()
							}
							
						}
					}
				};
				http.request(params);
			},
			//获取电影详情
			async upfilmData() {
				var params = {
					url: `/film/filmShort/u/getById/${this.id}`,
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							this.editForm = res.data
							this.filmCategoryList[0].forEach(item => {
								if (item.id == this.editForm.filmCategoryId) {
									this.editForm.filmCategoryName = item.name
								}
							})
							this.coverImgFiles.push({
								url: this.editForm.coverImg
							})
						}
					}
				};
				await http.request(params);
			},
			//上传图片前回调
			beforeRead(file) {
				//2097152   25224
				if (file.size > 2097152) {
					uni.showToast({
						title: '大小不得超过2MB',
						icon: 'error'
					})
				}
				this.uploadFileImg(file)

			},
			//上传图片后的回调
			afterRead(file) {
				this.coverImgFiles = []
				this.coverImgFiles.push({
					url: file
				})
				this.editForm.coverImg = file
			},
			//上传图片
			uploadFileImg(file) {
				let fileInfo = file[0];
				uni.uploadFile({
					url: Config.domain + '/u/my/uploadFile',
					filePath: fileInfo.url,
					name: "file",
					header: {
						Authorization: uni.getStorageSync(Constants.USER_TOKEN_KEY)
					},
					success: (res) => {
						let rData = JSON.parse(res.data);
						if (rData.code === 200) {
							this.$refs.uUpload.afterRead(rData.data)
						}
					},
					fail: () => {
						uni.$u.toast("上传图片出错")
					}
				})

			},
			//删除图片
			deleteImg(idx) {
				this.coverImgFiles = []
			},
			//关闭选择框
			cancelHandler(e) {
				this.pickerShow = false
			},
			//选择分类
			confirmHandler(e) {
				this.pickerShow = false
				const {
					columnIndex,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				this.editForm.filmCategoryName = e.value[0].name
				this.editForm.filmCategoryId = e.value[0].id
			},
			//提交修改
			editFilmData() {
				this.$refs.editFilm.validate().then(res => {
					if (res) {
						let formData = {
							id: this.id,
							filmCategoryId: this.editForm.filmCategoryId,
							coverImg: this.coverImgFiles[0].url,
							name: this.editForm.name,
							introduce: this.editForm.introduce
						}
						var params = {
							url: `/film/filmShort/u/save`,
							method: "POST",
							data: formData,
							callBack: (res) => {
								if (res.code === 200) {
									uni.$u.toast(this.id ? "修改成功" : "添加成功")
									setTimeout(function(){
										uni.navigateTo({
											url: '/pages_user/film/film'
										})
										// uni.navigateBack()
									},600)
								}
							}
						};
						http.request(params);
					}
				}).catch(errors => {
					uni.$u.toast("必填项未填")
				})

			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.btn {
		width: 90vw;
		position: absolute;
		left: 5vw;
		bottom: 30rpx;
	}
</style>
